<template>
    <div class="product-detail-box">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="item in gallery" :key="item.id">
                <img :src="item.img_url" />
            </van-swipe-item>
        </van-swipe>

        <div class="info" v-if="info.name">
            <p class="info-name">{{ info.name }}</p>
            <p class="info-brief">{{ info.goods_brief }}</p>
            <p class="info-price">{{ info.retail_price | moneyFlrmat }}</p>
        </div>

        <div class="attribute">
            <div class="mytitle">
                <span></span>
                <h3>商品参数</h3>
            </div>
            <ul>
                <li v-for="item in attribute" :key="item.id">
                    <span class="attribute-name">{{ item.name }}</span>
                    <span class="attribute-value">{{ item.value }}</span>
                </li>
            </ul>
        </div>
        <!-- 产品详情 -->
        <div class="mytitle">
            <span></span>
            <h3>产品详情</h3>
        </div>
        <!-- 产品描述信息 -->
        <div class="goods_desc" v-html="info.goods_desc"></div>

        <div class="mytitle">
            <span></span>
            <h3>常见问题</h3>
        </div>
        <!-- 常见问题 -->
        <ul class="issue">
            <li v-for="item in issue" :key="item.id">
                <h3>{{ item.question }}</h3>
                <p>{{ item.answer }}</p>
            </li>
        </ul>

        <!-- 产品列表 -->
        <Weekproduct :newGoodsList="goodsList" title="相关产品"> </Weekproduct>

        <!-- 添加购物车面板 -->
        <van-sku
            v-model="show"
            ref="sku"
            :sku="sku"
            :goods="goods"
            :hide-stock="sku.hide_stock"
            @add-cart="onAddCartClicked"
        />

        <!-- 下方购物车      -->
        <van-goods-action>
            <van-goods-action-icon
                :icon="star_flag ? 'star' : 'star-o'"
                :text="star_flag ? '已收藏' : '未收藏'"
                :color="star_flag ? '#ff5000' : '#323233'"
                @click="clickFn"
            />
            <van-goods-action-icon
                icon="cart-o"
                text="购物车"
                :badge="badge"
                @click="$router.push('/cart')"
            />
            <van-goods-action-button
                type="warning"
                text="加入购物车"
                @click="addCar"
            />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import { getDetailData, AddToCart, GetGoodsRelatedData,GetCartCountData } from "@/https/http";
import Weekproduct from "@/views/home/Weekproduct";

export default {
    name: "product-detail",
    data() {
        return {
            gallery: [],
            info: {},
            attribute: [], //参数
            show: false,
            sku: {
                tree: [], //规格类目 颜色 尺寸 。。。
                price: "", // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                // 数据结构见下方文档
                hide_stock: false, //是否隐藏剩余库存
            },
            goods: {
                // 默认商品 sku 缩略图
                picture: ''
            },
            productList: [], // 当前产品信息
            issue: [],
            goodsList: [],
            star_flag: false,
            badge:0,
        };
    },
    created() {
        this.GetDetailData()
        this.getRelatedData()
        this.getCartData()
    },
    methods: {
        addCar() {
            this.show = true
        },
        // 加入购物车
        onAddCartClicked() {
            console.log(666,this.$refs.sku.getSkuData());
            let obj = {}
            obj.goodsId = this.$route.query.id
            obj.productId = this.productList[0].id
            obj.number = this.$refs.sku.getSkuData().selectedNum
            AddToCart(obj).then((res) => {
                console.log(res);
                // 显示添加成功
                this.$toast.success("添加成功");
                this.getCartData()
            })
            // 隐藏 商品规格面板
            this.show = false;
        },
        // 获取产品明细数据列表
        GetDetailData() {
            getDetailData({ id: this.$route.query.id }).then((res) => {
                console.log(33, res);
                this.gallery = res.data.gallery;
                this.info = res.data.info;
                this.productList = res.data.productList;

                this.attribute = res.data.attribute;
                this.issue = res.data.issue;
                this.goods.picture = res.data.info.list_pic_url
                this.sku.price = res.data.info.retail_price
                this.sku.stock_num = res.data.info.goods_number
            });
        },
        // 获取相关产品数据列表
        getRelatedData() {
            GetGoodsRelatedData({ id: this.$route.query.id }).then((res) => {
                console.log(3366, res);
                this.goodsList = res.data.goodsList

            });
        },
        // 获取购物车商品数量
        getCartData(){
          GetCartCountData().then((res)=>{
            console.log(7778,res);
              this.badge = res.data.cartTotal.goodsCount
          })
        },
        clickFn() {
            this.star_flag = !this.star_flag
            if (this.star_flag) {
                this.$toast('收藏成功')
            } else {
                this.$toast('取消宝贝收藏成功')
            }
        }
    },
    components: {
        Weekproduct
    }
};
</script>

<style lang="less" scoped>
.product-detail-box {
    font-size: 14px;
    line-height: 30px;
    padding-bottom: 100px;
    img {
        width: 100%;
    }
    .info {
        text-align: center;

        .info-brief {
            color: #666;
        }
        .info-price {
            color: red;
        }
    }
    .attribute {
        ul {
            li {
                border-bottom: 1px solid #eee;
                font-size: 12px;
                display: flex;
                .attribute-name {
                    width: 15%;
                }
                .attribute-value {
                    flex: 1;
                }
            }
        }
    }
    .mytitle {
        text-align: center;
        font-size: 16px;
        margin-top: 20px;
        position: relative;
        height: 50px;
        span {
            width: 50%;
            height: 2px;
            background-color: #ccc;
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        h3 {
            width: 30%;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .issue {
        li {
            h3 {
                padding-left: 10px;
                line-height: 20px;
                position: relative;
                &:before {
                    content: "";
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background-color: red;
                    display: inline-block;
                    position: absolute;
                    left: 2px;
                    top: 50%;
                    margin-top: -2px;
                }
            }
            margin-bottom: 15px;
        }
    }
    /deep/.goods_desc {
        img {
            width: 100%;
        }
    }
}
</style>